<template>
  <div ref="map" :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import jiangsu from "@/assets/alarge/map/jiangsu.json";
import china from "@/assets/alarge/map/china.json";
import * as echarts from 'echarts'
// import { getFaceTrapeze } from "@/api/largescreen.js";
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      myChart: {},
      myChartStyle: { width: "3.6458rem", height: "3.2813rem" }, //图表样式760,690
      markerData: [],
      resdata: [],
      chart: null,
      toolTipData: [
        {
          name: '常州市',
          value: 5,
          proportion:"50%"
        },
        {
          name: '连云港市',
          value: 3,
              proportion:"50%"
        },
        {
          name: '无锡市',
          value: 80,
              proportion:"50%"
        },
        {
          name: '宿迁市',
          value: 35,
              proportion:"50%"
        },
        {
          name: '盐城市',
          value: 27,
              proportion:"50%"
        },
        {
          name: '扬州市',
          value: 80,
              proportion:"50%"
        },
        {
          name: '镇江市',
          value: 35,
              proportion:"50%"
        },
        {
          name: '泰州市',
          value: 27,
              proportion:"50%"
        }
      ]




    };
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      // 此处的3840 为设计稿的宽度，记得修改！
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
    getMarkerData() {

    },
    // 柱状体的主干
    lineData() {
      var geoCoordMap = {
        "南京市": [118.806, 32.05],
        "无锡市": [120.29, 31.60],
        "徐州市": [117.20, 34.30],
        "常州市": [119.95, 31.79],
        "苏州市": [120.60, 31.30],
        "南通市": [120.85, 32.05],
        "连云港市": [119.20, 34.60],
        "淮安市": [119.00, 33.60],
        "盐城市": [120.15, 33.40],
        "扬州市": [119.45, 32.40],
        "镇江市": [119.45, 32.20],
        "泰州市": [120.15, 32.50],
        "宿迁市": [118.30, 34.00]

      };
      return this.toolTipData.map((item) => {
        return {
          coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 0.4]]
        }
      })
    },
    // 柱状体的顶部
    scatterData() {
      var geoCoordMap = {

     

        "南京市": [118.806, 32.05],
        "无锡市": [120.29, 31.60],
        "徐州市": [117.20, 34.30],
        "常州市": [119.95, 31.79],
        "苏州市": [120.60, 31.30],
        "南通市": [120.85, 32.05],
        "连云港市": [119.20, 34.60],
        "淮安市": [119.00, 33.60],
        "盐城市": [120.15, 33.40],
        "扬州市": [119.45, 32.40],
        "镇江市": [119.45, 32.20],
        "泰州市": [120.15, 32.50],
        "宿迁市": [118.30, 34.00]

      };
      return this.toolTipData.map((item) => {
        console.log(item);
        
        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 0.4, item]
      })
    },
    initChart() {
      // 初始化echarts实例


      var myChart = echarts.init(this.$refs.map);
      var option;
      echarts.registerMap('jiangsu', jiangsu);

      //  var img2 = '';

      var img2 = 'image://';

      var mapName = 'jiangsu';
      var data = [
        { name: '南京市', value: 60 },
        { name: '无锡市', value: 50 },
        { name: '徐州市', value: 40 },
        { name: '常州市', value: 50 },
        { name: '苏州市', value: 60 },
        { name: '南通市', value: 40 },
        { name: '连云港市', value: 40 },
        { name: '淮安市', value: 30 },
        { name: '盐城市', value: 40 },
        { name: '扬州市', value: 50 },
        { name: '镇江市', value: 40 },
        { name: '泰州市', value: 40 },
        { name: '宿迁市', value: 10 }
      ];
      var geoCoordMap = {
        "南京市": [118.806, 32.05],
        "无锡市": [120.29, 31.60],
        "徐州市": [117.20, 34.30],
        "常州市": [119.95, 31.79],
        "苏州市": [120.60, 31.30],
        "南通市": [120.85, 32.05],
        "连云港市": [119.20, 34.60],
        "淮安市": [119.00, 33.60],
        "盐城市": [120.15, 33.40],
        "扬州市": [119.45, 32.40],
        "镇江市": [119.45, 32.20],
        "泰州市": [120.15, 32.50],
        "宿迁市": [118.30, 34.00]

      };

      /*获取地图数据*/
      myChart.showLoading();
      var mapFeatures = echarts.getMap(mapName).geoJson.features;
      myChart.hideLoading();
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.center;
      });
      console.log(mapFeatures);
      

      function convertObjectToData(obj) {
        console.log(obj);
        var dataArray = [];
        for (var key in obj) {
          console.log(key);

          if (obj.hasOwnProperty(key)) {


            var value = obj[key];
            console.log(obj);
            // 检查坐标是否有效
            if (Array.isArray(value) && value.length === 2 && !isNaN(value[0]) && !isNaN(value[1])) {
              dataArray.push({
                name: key,
                value: value
              });
            }
          }
        }


        return dataArray;
      }

      var convertedData = convertObjectToData(geoCoordMap);
      console.log(convertedData);

      option = {
        // backgroundColor: "#003366",
        title: {
          show: false,
          text: "项目分布图",
          x: 'center',
          top: "10",
          textStyle: {
            color: "#fff",
            fontFamily: "等线",
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: 'none',
          formatter: function (params) {
            if (typeof params.value[2] == 'undefined') {
              var toolTiphtml = '';
              for (var i = 0; i < this.toolTipData.length; i++) {
                if (params.name == this.toolTipData[i].name) {
                  toolTiphtml += this.toolTipData[i].name + "：" + this.toolTipData[i].value;
                }
              }
              console.log(toolTiphtml);
              // console.log(convertData(data))
              return toolTiphtml;
            } else {
              var toolTiphtml = '';
              for (var i = 0; i < this.toolTipData.length; i++) {
                if (params.name == this.toolTipData[i].name) {
                  toolTiphtml += this.toolTipData[i].name + "：" + this.toolTipData[i].value;
                }
              }
              console.log(toolTiphtml);

              return toolTiphtml;
            }
          },
          backgroundColor: "#fff",
          borderColor: "#333",
          padding: [5, 10],
          textStyle: {
            color: "#333",
            fontSize: "16"
          }
        },
        geo: [{
          layoutCenter: ['50%', '50%'],//位置
          layoutSize: '180%',//大小
          show: true,
          map: mapName,
          roam: false,
          zoom: 0.65,
          aspectScale: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear",
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },
            emphasis: {
              areaColor: "rgba(0,254,233,0.6)",
              // borderWidth: 0
            }
          }
        }, {
          type: "map",
          map: mapName,
          zlevel: -1,
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "51%"],
          layoutSize: "180%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        }, {
          type: "map",
          map: mapName,
          zlevel: -2,
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "52%"],
          layoutSize: "180%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
          },
        }, {
          type: "map",
          map: mapName,
          zlevel: -3,
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "53%"],
          layoutSize: "180%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
        }, {
          type: "map",
          map: mapName,
          zlevel: -4,
          aspectScale: 1,
          zoom: 0.65,
          layoutCenter: ["50%", "54%"],
          layoutSize: "180%",
          roam: false,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },],
        series: [
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 1, //长宽比
            zoom: 0.65,
            showLegendSymbol: true,
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: "120%"
                },
              },
              emphasis: {
                // show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },],
                  global: true, // 缺省为 false
                },
                borderColor: "#fff",
                borderWidth: 0.2,
              },
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "180%",
            animation: false,
            markPoint: {
              symbol: "none"
            },
            // data: data,
          },
          //柱状体的主干
          {
            type: 'lines',
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              width: 6, // 尾迹线条宽度
              color: 'rgba(249, 105, 13, .6)',
              opacity: 1, // 尾迹线条透明度
              curveness: 0 // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: 'end',
              formatter: '245'
            },
            silent: true,
            data: this.lineData()
          },
          // 柱状体的顶部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.data[2].name
                  var value = params.data[2].value
                  var toolTipData = params.data[2].proportion
                  var text = `{tline|${name}} : {fline|${value}}人 ${toolTipData} `
                  // var text = `{tline|项目个数} : {fline|${value}}`
                  return text;
                },
                color: '#fff',
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 600
                  },
                  tline: {
                    // padding: [0, 27],
                    color: '#ABF8FF',
                    fontSize: 12,
                  },
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: '#00FFF6',
              opacity: 1
            },
            symbol: img2,
            symbolSize: [100, 30],
            symbolOffset: [0, -10],
            z: 999,
            data: this.scatterData(),
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertedData,
            showEffectOn: 'render',
            // z: 998,
            symbol: 'circle',
            symbolSize: [5, 2.5],
            itemStyle: {
              normal: {
                color: '#00FFFF',
              }
            },
            rippleEffect: {
              scale: 10,
              // brushType: 'stroke',
            },


            // rippleEffect:{   // 涟漪特效相关配置。
            //     scale:10    // 控制涟漪大小
            // },

            // itemStyle: {
            //   normal: {
            //     color: '#fd9a95'  // 散点的颜色
            //   }
            // },











            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false,
                color: "#fff",
                distance: 10,
              },
            },
            // symbol: 'circle',
            // symbolSize: [20, 10],
            itemStyle: {
              normal: {
                color: '#16ffff',
                shadowBlur: 10,
                shadowColor: '#16ffff',
              },
              opacity: 1
            },
            zlevel: 4,
          },
        ],
      };
      myChart.setOption(option);
      var resdata;
      // getFaceTrapeze().then((res) => {
      //   // 获取请求成功的结果
      //   resdata = res.data.经纬度;
      //   for (let index = 0; index < resdata.length; index++) {
      //     var m = {};
      //     m["name"] = resdata[index].ape_id;
      //     var value = [];
      //     value[0] = resdata[index].longitude;
      //     value[1] = resdata[index].latitude;
      //     m["value"] = value;
      //     this.markerData.push(m);
      //   }
      //   var geoCoordMap = this.markerData;
      //   myChart.setOption({ series: [{ name: '摄像头', data: geoCoordMap, }] });
      // })
      //   .catch((error) => {
      //     console.log("error", error);
      //   });
      // 屏幕自适应
      window.addEventListener("resize", () => {
        myChart.resize();
      });

      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped></style>